<template>
	<view>
		<view>
			<view id="header">
				<text>填写</text>

				<view class="">
					<button size="mini" id="tiJiao">提交</button>
				</view>
			</view>
			<view id="bodrEr">
				<view id="body">
					<view class="oV">
						<view class="oV2">
							<text>巡检日期</text>
							<view class="oInp">
								<picker mode="date" @change="dataChange">
									<text>{{y}}/</text>
									<text>{{m}}/</text>
									<text>{{d}}</text>
								</picker>
							</view>
						</view>
					</view>
					<view class="oV">
						<view class="ov2">
							<text>读数(m³)</text>
							<view class="oInp">
								<input type="text" placeholder="请填写">
							</view>
						</view>
					</view>
					<view class="oV">
						<view class="oV1">
							<text>燃气泄漏</text>
							<view class="oInp">
								<picker mode="selector" :value="index" :range="array" @change="dataChange1">
									<text class="uni-input">{{array[index]==null?'请选择':array[index]}}</text>

								</picker>
							</view>
						</view>
					</view>
					<view class="oV">
						<view class="oV1">
							<text>安全系数</text>
							<view class="oInp">
								<picker mode="selector" :value="index1" :range="array1" @change="dataChange2">
									<text>{{array1[index1]==null?'请选择':array1[index1]}}</text>


								</picker>
							</view>
						</view>
					</view>
					<view>
						<view>视频图片</view>
						<view  class="baiZhao" v-if="c" @click="sheXiang">
							<view  >
								<view></view>
								<view>拍摄视频或照片</view>
							</view>
						</view>
						<view v-if="a">

							<camera  device-position="back" flash="off" @error="error"
								style="width: 100%; height: 450rpx;">

								<view>
									<image mode="widthFix" :src="src" v-if="b"></image>
								</view>
							</camera>

							<view id="btnbox">
								<button type="primary" @click="takePhoto">拍照</button>
								<button @click="chongPai">重拍</button>
								<button @click="send">确定</button>
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				y: '2021',
				m: '7',
				d: '23',
				array: ['是', '否'],
				index: null,
				array1: ['低', '中', '高'],
				index1: null,
				src: "",
				a:false,
				b: false,
				c:true





			}
		},



		methods: {
			dataChange: function(event) {
				// console.log(event.detail.value)
				let arr = event.detail.value.split('-')
				console.log(arr)
				this.y = arr[0],
					this.m = arr[1],
					this.d = arr[2]


			},
			dataChange1: function(e) {

				this.index = e.target.value
			},
			dataChange2: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index1 = e.target.value
			},
			takePhoto() {
				this.b=true

				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.src = res.tempImagePath
					}
				});
			},
			error(e) {
				console.log(e.detail);
			},
			chongPai(){
				this.b=false
				
			},
			send(){
				this.a=false,
				this.b=false,
				this.c=true
				
			},
			sheXiang(){
				this.c=false,
				this.b=false,
				this.a=true
			}





		},

	}
</script>

<style lang="less">
	#tiJiao {
		background-color: #007AFF;
		color: #FFFFFF;
	}

	#header {
		width: 740rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 55rpx;

		text {
			margin-top: 10rpx;
			margin-left: 30rpx;

		}
	}

	.oV {
		border: 1rpx solid #FFFFFF;
		width: 692rpx;
		height: 78rpx;
		background: rgb(242, 244, 245);
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		margin-top: 52rpx;
		align-items: center;


	}

	.oV1 {
		display: flex;
		justify-content: center;
		margin-left: -350rpx;
		align-items: center;
	}

	.oV2 {
		display: flex;
		justify-content: center;
		margin-left: -189rpx;
		align-items: center;
	}

	.ov2 {
		display: flex;
		justify-content: center;

		align-items: center;
	}

	.oInp {
		margin-left: 41rpx;

	}

	#bodrEr {
		display: flex;
		justify-content: center;
	}

	#btnbox {
		display: flex;
		justify-content: center;

	}

	.baiZhao {
		border: 1rpx solid #FFFFFF;
		width: 692rpx;
		height: 400rpx;
		background: rgb(242, 244, 245);
		border-radius: 12rpx;
		margin-top: 50rpx;
		display: flex;
		justify-content: center;

		align-items: center;

	}
</style>
